<template>
  <view class="familiesList allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="家庭列表" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <family-management v-for="(item,index) in familyList" :info="item" :key="index"></family-management>
    <view class="familiesList_btn allRowCenter mt-130" @click.stop="openFamilyPopup">
      <text class="familiesList_btn_text">新建家庭</text>
    </view>
    <view class="familiesList_affiliation allRowCenter mt-41" @click.stop="openAddFamilyPopup">
      <text class="familiesList_affiliation_text">加入家庭</text>
    </view>

    <!-- 加入家庭弹窗 -->
    <first_popup ref="addFamilyPopUp">
      <view class="addFamilyPopUp_popupContent mt-91 allRowCenter">
        <input type="text" v-model="familyName" placeholder="请输入家庭号" style="text-align: center"
               placeholder-class="addFamilyPopUp_popupContent_placeholder">
      </view>
    </first_popup>
    <!-- 新建家庭弹窗 -->
    <first_popup ref="firstPopup">
      <view class="familiesList_popupContent mt-91 allRowCenter">
        <input type="text" v-model="familyName" placeholder="请填写家庭名称" style="text-align: center"
               placeholder-class="familiesList_popupContent_placeholder">
      </view>
    </first_popup>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import FamilyManagement from "./components/familyManagement.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import {joinFamily, shiQinCreateFamily, shiQinGetFamilyList} from "../../api/shiqinAPI";

export default {
  components: {First_popup, FamilyManagement, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      // 家庭列表
      familyList: [],
      // 新建家庭名称
      familyName: ''
    };
  },
  onShow() {
    this.getFamilyList()
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  mounted() {
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 打开新建家庭弹窗
    openFamilyPopup() {
      this.$refs.firstPopup.openPopup({
        title: '新建家庭',
        maskClick: false,
        confirm: () => {
          if (!this.familyName) {
            uni.showToast({
              title: '家庭名称尚未填写',
              icon: 'none'
            })
            return
          }
          shiQinCreateFamily({
            name: this.familyName
          }).then(res => {
            if (res.status == '200') {
              uni.showToast({
                title: '创建成功',
                icon: 'none',
                duration: 2000
              })
              this.getFamilyList()
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
              })
            }
          })
          this.$refs.firstPopup.closePopup()
          this.familyName = ''
        }
      })
    },
    openAddFamilyPopup() {
      this.$refs.addFamilyPopUp.openPopup({
        title: '加入家庭',
        maskClick: false,
        confirm: () => {
          if (!this.familyName) {
            uni.showToast({
              title: '家庭号尚未填写',
              icon: 'none'
            })
            return
          }
          joinFamily({
            code: this.familyName
          }).then(res => {
            console.log(res)
            if (res.status == '200') {
              uni.showToast({
                title: '申请已提交',
                icon: 'none'
              })
              this.getFamilyList()
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
              })
            }
          })
          this.$refs.addFamilyPopUp.closePopup()
          this.familyName = ''
        }
      })
    },
    getFamilyList() {
      shiQinGetFamilyList().then(res => {
        this.familyList = res.data.list
      })
    }
  },
}
</script>

<style lang="scss">
.familiesList {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .familiesList_btn {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .familiesList_affiliation {
    width: 362rpx;
    height: 80rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    border: 2rpx solid #FF4206;

    .familiesList_affiliation_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FF4206;
    }
  }

  .familiesList_popupContent {
    width: 484rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #707070;

    .familiesList_popupContent_placeholder {
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }

  .addFamilyPopUp_popupContent {
    width: 484rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #707070;

    .addFamilyPopUp_popupContent_placeholder {
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }
}
</style>
